<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/view.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
    //新增按钮弹出窗口
	window.WeAdminShow = function(title, url, w, h) {
		if(title == null || title == '') {
			title = false;
		};
		if(url == null || url == '') {
			url = "404.html";
		};
		if(w == null || w == '') {
			w = ($(window).width() * 0.9);
		};
		if(h == null || h == '') {
			h = ($(window).height() - 50);
		};
		layer.open({
			type: 2,
			area: [w + 'px', h + 'px'],
			fix: false, //不固定
			maxmin: true,
			shadeClose: true,
			shade: 0.4,
			title: title,
			content: url
		});
	}
    </script>
    <link rel="icon" href="/favicon.ico">
    <title>广州砺峰科技管理后台</title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-page-header">
            <div class="pagewrap">
                <span class="layui-breadcrumb">
                  <a href="">首页</a>
                  <a href="">用户管理</a>
                  <a><cite>用户组</cite></a>
                </span>
                <h2 class="title">用户组</h2>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="form-box">
                        <div class="layui-form layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-form-mid">用户名:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                  <input type="text" name="username" id="username" autocomplete="off" class="layui-input">
                                </div>
                               <!--  <div class="layui-form-mid">邮箱:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                  <input type="text" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">性别:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <select name="sex">
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>     
                                </div> -->
                                <button class="layui-btn layui-btn-blue" onclick="search()">查询</button>
                              <!--   <button class="layui-btn layui-btn-primary">重置</button> -->
                            </div>
                        </div>
                        <button class="layui-btn" onclick="WeAdminShow('添加用户','${pageContext.request.contextPath}/GetAddUserServlet')">
                            <i class="layui-icon">&#xe654;</i>新增
                        </button>
                        <table id="demo" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="${pageContext.request.contextPath}/assets/layui.all.js"></script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
      function search(){
    	  var element = layui.element;
    	  var table = layui.table;
    	  var form = layui.form;
    	  var search =$("#username").val();
    	//用户列表
    	  var tableIns = table.render({
    	      elem: '#demo',
    	      url : '/Demo/FindUserServlet?search='+search,
    	      cellMinWidth : 95,
    	      page : true,
    	      height : "full-125",
    	      limits : [5,15,15,25,25],
    	      limit : 20,
    	      id : "userListTable",
    	      cols : [[
    	          {field: 'id', title: 'id', minWidth:50, align:"center",sort: true},
    	          {field: 'username', title: '登录名', minWidth:100, align:'center',sort: true},
    	          {field: 'fullname', title: '用户名',minWidth:100, align:'center',sort: true},
    	          {field: 'phone', title: '电话',minWidth:100, align:'center',sort: true},
    	          {field: 'active', title: '用户状态',  align:'center',templet:function(d){
    	              return d.active == "1" ? "正常使用" : "限制使用";
    	          }},
    	          {title: '操作', minWidth:175, templet:'#barDemo',fixed:"right",align:"center"}
    	          ]]
    	  });
      }
  var element = layui.element;
  var table = layui.table;
  var form = layui.form;
//用户列表
  var tableIns = table.render({
      elem: '#demo',
      url : '/Demo/FindUserServlet',
      cellMinWidth : 95,
      page : true,
      height : "full-125",
      limits : [5,15,15,25,25],
      limit : 20,
      id : "userListTable",
      cols : [[
          {field: 'id', title: 'id', minWidth:50, align:"center",sort: true},
          {field: 'username', title: '登录名', minWidth:100, align:'center',sort: true},
          {field: 'fullname', title: '用户名',minWidth:100, align:'center',sort: true},
          {field: 'phone', title: '电话',minWidth:100, align:'center',sort: true},
          {field: 'active', title: '用户状态',  align:'center',templet:function(d){
              return d.active == "1" ? "正常使用" : "限制使用";
          }},
          {title: '操作', minWidth:175, templet:'#barDemo',fixed:"right",align:"center"}
          ]]
  });
  //监听工具条 ----------------------------------------------- Begin-----------------------------------------------------------
  table.on('tool(test)', function (obj) {    //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      if (layEvent == 'detail')
      {
          layer.open(
            {
                type: 2,
                title: '编辑页面',
                skin: 'layui-layer-molv',
                shadeClose: false,
                shade: 0.8,
                area: ['880px', '550px'],
                content: '${pageContext.request.contextPath}/GetAddUserServlet?id='+data.id,//跳转的页面
                cancel: function (index)
                {
                    $(".layui-laypage-btn").click();//这里用于关闭Open时触发回调函数  刷新父页面数据  一定要引入Jquery
                }

            });
          //注：在这里我不就做修改界面了  这里这只是一个弹出框  弹出你的修改页面  Content中你自定义自己的页面路径并传参数
      } else//删除数据
      {
          //删除数据在这里可以使用Ajax异步  就和平常使用一样简单
           $.ajax({
			             type: "post",
			             url: "${pageContext.request.contextPath}/DeleteUserById",
			             data: { id: data.id },
			             dataType: "json",
			             success: function(data){
			            	/*  alert(data.code);
			           	     alert(data.msg); */
			           	  if (data.code == 1) {
	                            layer.msg(data.msg, { icon: 1, time: 1500 }, function () {
	                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	                                $(".layui-laypage-btn").click();
	                            });
	                        } else
	                        {
	                            layer.msg(data.msg, { icon: 2, time: 1500 });
	                        }
			              }
        			 });
      }
  });

    </script>
</body>
</html>